import { usePortfolio } from '../context/PortfolioContext';

const SearchBar = () => {
  const { searchTerm, setSearchTerm } = usePortfolio();

  return (
    <div className="relative">
      <input
        type="text"
        placeholder="搜索作品..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        className="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-full dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 w-48 md:w-64"
      />
      <svg className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </div>
  );
};

export default SearchBar;
